<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
    		html body{
    			height: 100%;
    		}
		.box{
			text-align: center;
		}
		.btn{
			display: inline-block;
			height: 30px;
			line-height: 30px;
			border:1px solid #ccc;
			background-color: #fff;
			padding: 0 10px;
			margin-right: 50px;
			color: #333;
		}
		.loading{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #eee;
			text-align: center;
			font-size: 30px;

		}
    </style>
    <body>
    	<div class="box">
    		<img src="http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg" alt="pic" 
    		id="img" width="1200px" />
    		<p>
    			<a href="javascript:;" class="btn" data-control="prev" >上一页</a>
    			<a href="javascript:;" class="btn" data-control="next" >下一页</a>
    		</p>
    	</div>
    	<div class="loading">
    		<p class="progress"></p>
    	</div>
    	<script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
    	<script type="text/javascript">
    			var imgs=[

		'http://i2.hoopchina.com.cn/user/308/15960308/13383588090.jpg',

		'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',

		'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',

		'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'

	];
	   var index=0,
	   len=imgs.length,
	   count=0,
	   $progress=$(".progress")
	   $.each(imgs,function(i,src){
	   	var imgObj=new Image();
	   	$(imgObj).on("load error",function(){
	   		$progress.html(Math.round((count+1)/len * 100)+"%");
	   		if(count>=len-1){
	   			$(".loading").hide();
	   			document.title="1/"+len;
	   		}
	   		count++

	   	})
	   	imgObj.src=src;
	   });
	   $(".btn").on("click",function(){
	   	if("prev"===$(this).data("control")){
	   		//上一张
	        //index--;
	        //if(index<0){
	        //index=0;
	        //}
	        
	        index=Math.max(0,--index);
	   	}else{
	   		index=Math.min(len-1,++index);
	   	}
	   	document.title=(index+1)+"/"+len;
	   	$("#img").attr("src",imgs[index]);
	   });

    	</script>
    </body>
</html>